<template>
    <div>
        <div class="member_list">
            <div class="member_item" 
                v-for="(item, index) in list" :key="index">
                <div class="avator">
                    <image :src="item.headImg" mode="" />
                </div>
                <div class="detail">
                    <div class="flex">
                        <p class="flex-1"> {{item.userName}} </p>
                        <em>分享次数：{{item.cnt}}</em>
                    </div>
                    <span class="overflow">分享：{{item.title}}</span>
                </div>
            </div>
            <pub-list-end :loading="scroll.loading" :max="scroll.max" :noData="scroll.noData"></pub-list-end>
        </div>        
    </div>
</template>

<script>
import articleItem from '@/components/pages/article-item.vue'
import { getTeamShareHisByDynamic }  from '@/request/team'
export default {
    components: {
        articleItem,
    },
    data() {
        return {
            dynamicId: '',
            list: [],
            scroll: {
                page: 1,
                size: 30,
                loading: false,
                max: false,
                noData: false,
            },
        }
    },
    onLoad({ dynamicId }) {
        this.dynamicId = dynamicId
        this.onRefresh()
    },
    methods: {
        getList(complete) {
            getTeamShareHisByDynamic({
                dynamicId: this.dynamicId,
                pageIndex: this.scroll.page,
                pageSize: this.scroll.size,
            }, {complete}).then(res => {
                this.list = res.data.list
                this.scroll.max = this.list.length >= res.data.total
                this.scroll.noData = res.data.total == 0
            })
        },
        // 重头第一页刷新列表
        onRefresh() {
            this.scroll.loading = true
            this.scroll.max = false
            this.scroll.noData = false
            this.scroll.page = 1
            this.shareUserList = []
            this.getList(() => {
                this.scroll.loading = false;
                uni.stopPullDownRefresh()
            })
        },
        // 滚动到底部加载
        onInfinite() {
            if(this.scroll.loading || this.scroll.max) return
            this.scroll.loading = true
            this.scroll.page += 1
            this.getList(() => {
                this.scroll.loading = false
            })
        }
    }
}
</script>

<style lang="less" scoped>
.member_list{
    width: 100%;
    margin-top: 20rpx;
    background: #fff;
    .member_item{
        width: 100%;
        padding: 20rpx 30rpx;
        border-bottom: 1px solid #eee;
        display: flex;
        .avator{
            margin-right: 20rpx;
            width: 100rpx;
            height: 100rpx;
            flex-shrink: 0;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .detail{
            flex: 1;
            height: 100rpx;
            width: 1px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            p{
                font-size: 32rpx;
                font-weight: bold;
            }
            em{
                font-size: 24rpx;
                color: #ccc;
                padding-right: 20rpx;
            }
            span{
                font-size: 28rpx;
                color: #666;
            }
        }
        
    }
}


</style>